<template>
  <div>
    <el-col :span="12">
      <el-card class="header" style="height:200px;" shadow="always">
         <el-row class="title">任务完成率</el-row>
         <el-row class="layouts_one">
           <div id="main3"></div>
         </el-row>
      </el-card>
    </el-col>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return{
      datalist:[]
    }
  },
  created() {

  },
  mounted() {
  const myChart3 = echarts.init(document.getElementById('main3'));
       // 图表四的配置
  const rawData = [
    [11, 4, 0, 11, 3, 4, 6],
    [5, 3, 2, 5,3, 3, 6]
  ];
  const totalData = [];
  for (let i = 0; i < rawData[0].length; ++i) {
    let sum = 0;
    for (let j = 0; j < rawData.length; ++j) {
      sum += rawData[j][i];
    }
    totalData.push(sum);
  }

const grid = {
  left: 500,
  right: 100,
  top: 50,
  bottom: 50
};
const series = ['完成率','未完成率'].map((name, sid) => {
  let color;
  if (name === '完成率') {
    color = '#FFCCC7'; // 未完成率柱子的颜色
  } else {
    color = '#93D2F3'; // 完成率柱子的颜色
  }
  return {
    name,
    type: 'bar',
    stack: 'total',
    barWidth: '35%',
    label: {
      show: true,
      formatter: (params) => Math.round(params.value * 1000) / 10 + '%',
      color: 'white', // 设置字体颜色为白色
      fontSize: 8 // 设置字体大小为 14
    },
    data: rawData[sid].map((d, did) => totalData[did] <= 0 ? 0 : d / totalData[did] ),
    itemStyle: {
      color: color
    },

    barGap: '20%'
  };
});
myChart3.setOption({
    legend: {
    orient: 'horizontal',
    bottom:'45px'
  },
  axisLabel: {
    rotate: this.datalist.length > 10? 60 : 0
  },
  grid: {
    top:'80px',
    containLabel: true
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: value => `${value * 100}%`
    }
  },
  tooltip: {
     trigger: 'axis',
     axisPointer: {
     type: 'shadow'
   }
  },
  xAxis: {
    type: 'category',
    data:  ['张三', '李四', '王五', '老六', '小明', '小张', '小乐','王五', '老六', '小明', '小张', '小乐']
  },
  series
  })
  }
}
</script>

<style lang="less" scoped>
.header {
  margin-bottom:15px;
  padding: 20px;
  .title {
    font-weight: bolder;
    padding-left: 12px;
    border-left: 6px solid rgb(124, 148, 237);
  }
  .item {
    margin-top: 30px;
    width: 154px;
    height: 80px;
    margin-left: 22px;
    color: white;
    // background-color: pink;
    border-radius: 5px;
  }
  .item_li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .item_li span:first-child {
      font-size: 24px;
      margin-top: 15px;
      margin-bottom: 5px;
      align-self: center;
    }

   .item_li span:last-child {
      display: flex;
      font-size: 16px;
    }
}

.layouts {
  margin-right: 15px;
  .layouts_one {
     display: flex;
     justify-content: center;
     align-items: center;
  }

}

/deep/ .el-col-4 {
  margin-right: 38px;
}

#main3 {
  height: 300px;
  width: 100%;
  margin-top: -60px;
}
</style>
